<template>
  <div class="home">
    <h1>输入任务：<input type="text" v-model="inpText">
      <button @click="add">添加</button>
    </h1>
     <ul>
      <h1 style="color:blue;">未完成的任务</h1>
      <li v-for="(item,index) in notList" :key="index">
        <input @click="change(item.id)"  type="checkbox" :checked="item.ischeck">
        <span>{{item.text}}</span>
        <button>删除</button>
      </li>
    </ul>
    <ul>
      <h1 style="color:red;">已完成的任务</h1>
      <li v-for="(item,index) in doneList" :key="index">
        <input @click="change(item.id)"  type="checkbox" :checked="item.ischeck">
        <span class="done">{{item.text}}</span>
        <button>删除</button>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent,onBeforeMount,onMounted,ref,toRefs,reactive,computed, toRef } from 'vue';
import {todoList} from './hook/todoList'
import axios from 'axios'
export default defineComponent({
  name:"home",
  setup(){
    let mydata=todoList();
    //  组件挂载前调用接口
    onBeforeMount(()=>{
      axios.post("/VueHandler/Handler/OfflineCourseHandler.ashx?action=indexshow").then((res:any)=>{
          console.log(res)
      })
    })
    return {
      ...mydata
    }
  }
})



</script>
<style lang="less" scoped>
  ul {
    width: 500px;
    margin: 20px auto;
    li{
      width: 500px;
      display: flex;
      justify-content: space-around;
      background: seagreen;
      margin-top: 20px;
      .done{
        text-decoration: line-through;
      }
    }
  }
</style>
